<template>

   <!-- 让导航栏在滚动时吸顶 -->
   <van-sticky>

      <van-nav-bar v-show="!$route.meta.hideTitle">

         <!-- 覆盖左侧区域：广州+↓ -->
         <template #left>
            <!-- 点击切换路由/cities -->
            <div
               v-if="$route.meta.isTabPage"
               @click="$router.push('/cities')">
               <span style="margin-right: 5px">广州</span>
               <van-icon
                  name="arrow-down"
                  color="#999"
                  size="12" />
            </div>

            <!-- X 点击时返回上一个路径 -->
            <div
               v-else
               @click="$router.back">
               <van-icon
                  color="#999"
                  name="cross"
                  size="20" />
            </div>
         </template>

         <!-- 覆盖title区域：自定义title样式和文本 -->
         <!-- 将当前路由元信息中的title作为title -->
         <template #title>
            <span style="font-weight: normal; font-size: 16px">{{ $route.meta.title }}</span>
         </template>

         <!-- 覆盖右侧区域：使用放大镜图标 -->
         <template #right>
            <van-icon
               color="#999"
               name="search"
               size="20" />
         </template>

      </van-nav-bar>
   </van-sticky>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped></style>
